<template>
  <div>
    <el-form :model="formItem" label-width="120px" size="mini">
      <el-form-item label="维护任务名称">
        <el-input v-model="formItem.s_name.value" clearable placeholder="请输入任务名称" />
      </el-form-item>
      <el-form-item label="维护部门">
        <treeselect
          v-model="formItem.s_orgCode.value"
          :multiple="false"
          :options="availableOganizations"
          placeholder="请选择部门"
          @select="onOrgSelect"
        />
      </el-form-item>
      <el-form-item label="执行人">
        <el-input v-model="formItem.s_chargeUserId.valueName" clearable placeholder="请选择执行人" @focus="handleUserIconClick" />
      </el-form-item>
      <el-form-item label="维护类别">
        <treeselect
          v-model="formItem.s_modelCode.value"
          :multiple="false"
          :options="cmdbModels"
          :load-options="loadOptions"
          :disable-branch-nodes="true"
          id-key="code"
          label-key="name"
          placeholder="请选择维护类别"
          @select="onTypeSelect"
        />
      </el-form-item>
      <el-form-item label="维护任务状态">
        <el-select v-model="formItem.s_status.value" clearable placeholder="请选择维护任务状态">
          <el-option v-for="(item) in status" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="维护结果">
        <el-select v-model="formItem.s_result.value" clearable placeholder="请选择维护结果">
          <el-option v-for="(item) in result" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="执行时间">
        <el-date-picker
          v-model="timeRangeStockStart"
          type="daterange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="任务开始日期"
          end-placeholder="任务结束日期"
          align="right"
          value-format="timestamp"
        />
      </el-form-item>
    </el-form>
    <SelectDialog v-if="userSelDialogFormVisible" title="选择执行人" :append-to-body="true" :show="userSelDialogFormVisible" @on-ok="selectUserOk" @on-cancel="selectUserCancel">
      <UsersPage ref="usersTable" :for-selection="true" :multiple-selected="true" :org-code="formItem.orgCode" />
    </SelectDialog>
  </div>
</template>
<script>
import UsersPage from '@neu/auth-ui/views/users/tables'
import * as organizations from '@neu/auth-ui/api/organization'
import SelectDialog from '@neu/biz-core/components/SelectDialog'
import { pureTree } from '@neu/dcom-ui/api/schema'
import { formatDate } from '@neu/biz-core/utils/utils'
import { clone } from '@neu/biz-core/utils/utils'

const formItem = {
  s_name: { value: '', label: '名称', valueName: '' },
  s_orgCode: { value: null, label: '部门', valueName: '' },
  s_chargeUserId: { value: '', label: '执行人', valueName: '' },
  s_modelCode: { value: null, label: '类别', valueName: '' },
  s_status: { value: '', label: '状态', valueName: '' },
  s_result: { value: '', label: '结果', valueName: '' },
  s_startDateTime: { value: '', label: '开始时间', valueName: '' },
  s_endDateTime: { value: '', label: '结束时间', valueName: '' }
}

export default {
  name: 'MaintainTaskQueryTableFilter',
  components: {
    UsersPage,
    SelectDialog
  },
  props: {
    filter: {
      required: true,
      type: Function
    }
  },
  data() {
    return {
      formItem: {
        ...formItem
      },
      /** CMDB模型树 */
      cmdbModels: null,
      /** 部门 */
      availableOganizations: [],
      userSelDialogFormVisible: false,
      /** 时间选择器 */
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      status: [],
      result: [],
      timeRangeStockStart: []
    }
  },
  mounted() {
    organizations.tree().then(response => {
      this.availableOganizations = [response.data]
    })
    this.status = [{ value: 'undo', label: '未执行' },
      { value: 'doing', label: '执行中' },
      { value: 'done', label: '已执行' }]
    this.result = [{ value: 'normal', label: '正常' },
      { value: 'abnormal', label: '异常' }]
  },
  methods: {
    onOrgSelect: function(value) {
      this.formItem.s_orgCode.valueName = value.title
    },
    onTypeSelect(value) {
      this.formItem.s_modelCode.valueName = value.name
    },
    search: function() {
      if (this.timeRangeStockStart && this.timeRangeStockStart.length !== 0) {
        this.formItem.s_startDateTime.value = this.timeRangeStockStart[0]
        this.formItem.s_startDateTime.valueName = formatDate(this.timeRangeStockStart[0], 'YYYY-MM-DD')
        this.formItem.s_endDateTime.value = this.timeRangeStockStart[1]
        this.formItem.s_endDateTime.valueName = formatDate(this.timeRangeStockStart[1], 'YYYY-MM-DD')
      }

      var dataStatus = this.status.filter(item => {
        return item.value === this.formItem.s_status.value
      })
      this.formItem.s_status.valueName = dataStatus.length === 1 ? dataStatus[0].label : this.formItem.s_status.value

      var dataResult = this.result.filter(item => {
        return item.value === this.formItem.s_result.value
      })
      this.formItem.s_result.valueName = dataResult.length === 1 ? dataResult[0].label : this.formItem.s_result.value

      this.filter(this.formItem)
    },
    reset: function() {
      for (var t in formItem) {
        formItem[t].value = ''
        formItem[t].valueName = ''
      }
      formItem.s_startDateTime = { value: '', label: '开始日期', valueName: '' }
      formItem.s_endDateTime = { value: '', label: '结束日期', valueName: '' }
      formItem.s_orgCode = { value: null, label: '部门', valueName: '' }
      formItem.s_modelCode = { value: null, label: '类别', valueName: '' }
      this.timeRangeStockStart = []
      this.formItem = clone(formItem)
      this.search()
    },
    onFilterItemClose: function(item) {
      if (item.k === 's_startDateTime' || item.k === 's_endDateTime') {
        this.formItem['s_startDateTime'] = { value: '', label: '开始日期', valueName: '' }
        this.formItem['s_endDateTime'] = { value: '', label: '结束日期', valueName: '' }
      } else if (item.k === 's_orgCode') {
        this.formItem.s_orgCode = { value: null, label: '部门', valueName: '' }
      } else if (item.k === 's_modelCode') {
        this.formItem.s_modelCode = { value: null, label: '类别', valueName: '' }
      } else {
        formItem[item.k].value = ''
        formItem[item.k].valueName = ''
        this.formItem[item.k] = clone(formItem[item.k])
      }

      this.filter(this.formItem)
    },
    handleUserIconClick() {
      this.userSelDialogFormVisible = true
    },
    selectUserOk() {
      var users = this.$refs.usersTable.selections
      if (users.length > 1) {
        return this.$message({
          showClose: true,
          message: '只能选择一个用户',
          type: 'error'
        })
      }
      if (users.length < 1) {
        this.formItem.s_chargeUserId.value = ''
        this.formItem.s_chargeUserId.valueName = ''
      } else {
        this.formItem.s_chargeUserId.value = users[0].id
        this.formItem.s_chargeUserId.valueName = users[0].name ? users[0].name : users[0].username
      }
      this.userSelDialogFormVisible = false
    },
    selectUserCancel() {
      this.userSelDialogFormVisible = false
    },
    loadOptions({ action }) {
      if (action === 'LOAD_ROOT_OPTIONS') {
        return pureTree().then(response => {
          this.cmdbModels = response.data
        })
      }
    }
  }
}
</script>
